<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <style>
    @import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      --color: rgba(30, 30, 30);
      --bgColor: rgb(215, 215, 215);
      min-height: 100vh;

      display: grid;
      align-content: center;
      gap: 2rem;
      padding: 2rem;

      font-family: "Oxygen", sans-serif;
      color: var(--color);
      background: var(--bgColor);
    }

    ol {
      width: min(60rem, 90%);
      margin-inline: auto;

      display: flex;
      flex-wrap: wrap;
      gap: 2rem;

      list-style: none;
      counter-reset: cardnr;
      justify-content: center;
    }

    li {
      --frontColor: white;
      --width: 10em;
      --inlineP: 0.5rem;
      --borderR: 4rem;
      --arrowW: 2rem;
      --arrowH: 1.5rem;

      counter-increment: cardnr;
      width: calc(var(--width) - var(--inlineP) * 2);
      display: grid;
      grid-template:
        "icon" var(--borderR) "title"
        "descr" 1fr;
      margin-inline: var(--inlineP);
      margin-bottom: calc(var(--borderR));
      position: relative;
    }

    li .icon,
    li .title,
    li .descr {
      background: var(--frontColor);
      padding-inline: 1rem;
      padding-bottom: 1rem;
    }

    li .icon,
    li .title {
      color: var(--accent-color);
      text-align: center;
      padding-bottom: 0.5rem;
    }

    li .title,
    li .descr {
      filter: drop-shadow(0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25));
    }

    li .icon {
      grid-area: icon;
      font-size: 2rem;
      display: grid;
      place-items: center;
      border-radius: var(--borderR) 0 0 0;
      position: relative;
    }

    li .title {
      grid-area: title;
      font-size: 1.1rem;
      font-weight: bold;
    }

    li .descr {
      grid-area: descr;
      font-size: 0.85rem;
      text-align: center;
    }

    li .descr::before {
      content: "";
      width: var(--arrowW);
      height: var(--arrowH);
      position: absolute;
      right: 1.5rem;
      top: 100%;
      background: inherit;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    li::after {
      content: counter(cardnr, decimal-leading-zero);
      position: absolute;
      z-index: -1;

      left: calc(var(--inlineP) * -1);
      right: calc(var(--inlineP) * -1);
      top: var(--borderR);
      bottom: calc(var(--borderR) * -1);

      display: flex;
      align-items: flex-end;
      background: var(--accent-color);
      background-image: linear-gradient(160deg,
          rgba(255, 255, 255, 0.25),
          transparent 25% 75%,
          rgba(0, 0, 0, 0.25));
      border-radius: 0 0 var(--borderR) 0;

      --pad: 1rem;
      padding: var(--pad);
      font-size: calc(var(--borderR) - var(--pad) * 2);
      color: white;
    }

    li::before {
      content: "";
      position: absolute;
      height: var(--borderR);
      top: calc(100% + var(--borderR) - 2px);
      left: calc(var(--inlineP) * -1);
      right: calc(var(--inlineP) * -1);
      border-radius: 0 var(--borderR) 0 0;

      background-image: linear-gradient(var(--accent-color), transparent 60%);
      opacity: 0.5;
      filter: blur(2px);
    }

    .credits {
      margin-top: 2rem;
      text-align: right;
      text-align: center;
    }

    .credits a {
      color: var(--color);
    }
  </style>

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>【每日一练】157—一款实用好看的展示列表</title>
    <link rel="stylesheet" href="style.css">

  </head>

  <body>
    <ol>
      <li style="--accent-color:#0D6EFD">
        <div class="icon"><i class="fa-brands fa-html5"></i></div>
        <div class="title">HTML+CSS</div>
        <div class="descr">前端基础知识，必备技能之一，最简单，也是最重要的。</div>
      </li>
      <li style="--accent-color:#6710F5">
        <div class="icon"><i class="fa-brands fa-html5"></i></div>
        <div class="title">HTML 5</div>
        <div class="descr">学HTML5需要一些HTML与CSS的知识,最好还能具备JS基础知识</div>
      </li>
      <li style="--accent-color:#6F42C1">
        <div class="icon"><i class="fa-brands fa-css3"></i></div>
        <div class="title">CSS 3</div>
        <div class="descr">学CSS3需要一些HTML与CSS的知识，最好还能具备JS基础知识</div>
      </li>
      <li style="--accent-color:#D63384">
        <div class="icon"><i class="fa-brands fa-js"></i></div>
        <div class="title">Javascript</div>
        <div class="descr">JS是前端领域里的重头戏，对于很多人来讲也是一个硬骨头，但是要想学好前端，JS是必学必会。</div>
      </li>
      <li style="--accent-color:#DC3545">
        <div class="icon"><i class="fa-brands fa-html5"></i></div>
        <div class="title">前端框架</div>
        <div class="descr">前端框架有很多，但是也不用每一个都学，先学一两个主流的框架。</div>
      </li>
    </ol>
    <div class="credits">
      <a target="_blank" href="http://www.webqdkf.com">web前端开发</a>
    </div>

  </body>

  </html>

</body>

</html>